:root {
--blank: #eaf1ee;
--fist: #f29564;
--sky: #c2d3f2;
--toxic: #b240ff;
--earth: #8e5d41;
--stone: #c3ab7a;
--insect: #d8e58a;
--spooky: #827fa9;
--flame: #ff3f44;
--splash: #1C6CF0;
--iron: #99a0a5;
--meadow: #9af66f;
--zap: #ffda00;
--mind: #ff65b2;
--icicle: #9afde4;
--draco: #4f2dda;
--dread: #614d51;
--pixie: #f2bde8;
}

.blank { background-color: var(--blank)}
.fist { background-color: var(--fist)}
.sky { background-color: var(--sky)}
.toxic { background-color: var(--toxic)}
.earth { background-color: var(--earth)}
.stone { background-color: var(--stone)}
.insect { background-color: var(--insect)}
.spooky { background-color: var(--spooky)}
.flame { background-color: var(--flame)}
.splash { background-color: var(--splash)}
.iron { background-color: var(--iron)}
.meadow { background-color: var(--meadow)}
.zap { background-color: var(--zap)}
.mind { background-color: var(--mind)}
.icicle { background-color: var(--icicle)}
.draco { background-color: var(--draco)}
.dread { background-color: var(--dread)}
.pixie { background-color: var(--pixie)}

b.emphasis {
    text-decoration: underline;
    font-weight: normal;
}
b.appendix-name { text-decoration: underline; }
:has(+ .inline-secondary) {
    margin-bottom: 0;
}
.inline-secondary {
    font-style: italic;
    font-size: 75%;
    margin-top: 0;
    display: block;
}

table {
    margin: 1em auto;
    border: none;
}

.void-diagram { width: 90%; }

.void-flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.void-flex-element {
    width: 40%;
    margin: 0 auto;
}
.void-flex-element span {
    font-size: 85%;
    margin-top: 0.1em;
    display: block;
}

button {
    margin: 5px;
    border: black 3px solid;
    border-radius: 3px;
    transition: colour 0.5s, background-colour 0.5s;
    display: block;
}
button:hover {
    color: white;
    background-color: black;
}